<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" shadow background-color="rgb(107,60,94)" status-bar left-icon="left"
			left-text="返回" title="申请记录详情" @clickLeft="back()" />
		<view class="example-body">
			<!-- <h2>{{username}}的NO.{{no}}{{type}}申请记录：</h2> -->
			<view style="margin-bottom: 10px ;">
				<uni-table emptyText="暂无更多数据">
					<uni-tr>
						<uni-th style="font-size: 18px;color: #000000;" align="left">基本信息: </uni-th>
						<uni-th style="font-size: large;" align="left" width="280"></uni-th>
					</uni-tr>
					<uni-tr>
						<uni-td style="font-size: large;">姓名：</uni-td>
						<uni-td style="font-size: large;">{{username}}</uni-td>
					</uni-tr>
					<uni-tr v-if="type ==0">
						<uni-td style="font-size: large;">申请类型：</uni-td>
						<uni-td style="font-size: large;">机位</uni-td>
					</uni-tr>
					<uni-tr v-if="type ==1">
						<uni-td style="font-size: large;">申请类型：</uni-td>
						<uni-td style="font-size: large;">共享空间</uni-td>
					</uni-tr>
					<uni-tr v-if="type ==2">
						<uni-td style="font-size: large;">申请类型：</uni-td>
						<uni-td style="font-size: large;">会议室</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td style="font-size: large;">序号：</uni-td>
						<uni-td style="font-size: large;">{{index}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<view class="head">
				<uni-title title="详细内容：" type="h2" style="margin-left: 4px;"></uni-title>
				<!-- {{this.opjs}} -->

				<uni-table stripe border emptyText="暂无更多数据">
					<uni-tr>

					</uni-tr>

					<uni-tr v-if="type!=2">
						<uni-td style="font-size: 16px;">教学楼：</uni-td>
						<uni-td style="font-size: 16px;">{{build}}</uni-td>
					</uni-tr>
					<uni-tr v-if="type==0">
						<uni-td style="font-size: 16px;">教室：</uni-td>
						<uni-td style="font-size: 16px;">{{room}}</uni-td>
					</uni-tr>
					<uni-tr v-if="type==1">
						<uni-td style="font-size: 16px;">会议室：</uni-td>
						<uni-td style="font-size: 16px;">{{room}}</uni-td>
					</uni-tr>
					<uni-tr v-if="type==2">
						<uni-td style="font-size: 16px;">共享空间：</uni-td>
						<uni-td style="font-size: 16px;">{{build}}</uni-td>
					</uni-tr>
					<uni-tr v-if="type!=1">
						<uni-td style="font-size: 16px;">位置：</uni-td>
						<uni-td style="font-size: 16px;">{{position}}</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td style="font-size: 16px;">时间：</uni-td>
						<uni-td style="font-size: 16px;">{{time}}</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td style="font-size: 16px;">状态：</uni-td>
						<uni-td style="font-size: 16px;">{{sign}}</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td style="font-size: 16px;">违规情况：</uni-td>
						<uni-td style="font-size: 16px;">{{check}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<view class="cancelbtn">
				<button type="default" class="btn" @click="dialogToggle()"><text
						class="button-text success-text">取消申请</text></button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: -1,
				username: "Deja vu",
				opjs: null,
				index: -1,
				head: '文宣楼-A101-A3',
				build: '文宣楼',
				room: 'A101',
				position: 'A3',
				time: '2022年5月4日 8：00-12：00',
				sign: '已签到',
				open: false,
				check: '未检查到违规现象',
				poptype: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: ''
			};
		},
		methods: {
			onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
				console.log(option); //打印出上个页面传递的参数。

				if (option) {
					this.opjs = JSON.parse(option.onjs)
					//this.type = this.opjs.type
					this.index = this.opjs.index
					this.head = this.opjs.head
					this.build = this.opjs.build
					this.room = this.opjs.room
					this.position = this.opjs.position
					this.time = this.opjs.time
					this.sign = this.opjs.sign
					this.open = this.opjs.open
					this.check = this.opjs.check
				}
				console.log(option.type); //打印出上个页面传递的参数。
				this.type = option.type;
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			dialogToggle() {
				if (this.sign !== '未签到') {
					uni.showToast({
						title: '不可取消！',
						icon: 'error', //将值设置为 success 或者 ''
						duration: 1000 //持续时间为 2秒
					})
				} else {
					uni.showModal({
						title: '取消申请',
						content: '确认要取消这条申请吗？',
						success: function(res) {
							if (res.confirm) {
								// console.log('点击了确认')
								// uni.showLoading({
								// 	title: '加载中...'
								// });
								// setTimeout(() => {
								// 	uni.hideLoading()
								// }, 1500)
								uni.showToast({
									title: '取消申请成功',
									icon: 'success', //将值设置为 success 或者 ''
									duration: 1000 //持续时间为 2秒
								})
							} else {
								console.log('点击了取消')
							}
						}
					});
				}
			}

		}
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	h2 {
		text-align: center;
	}

	p {
		margin-top: 5px;
	}

	.container {
		font-size: 14px;
		line-height: 24px;
		padding: 0 2 2 2px;
	}

	.example-body {
		padding: 12px;
		background-color: #FFFFFF;
	}

	.head {
		padding: 5px;
		font-size: large;

	}

	.content {
		margin-top: 20px;
		padding: 5px;
		font-size: large;
	}

	.thead {
		font-size: larger;
	}

	.btn {
		background-color: rgb(107, 60, 94);
		color: white;
		margin-top: 50rpx;
	}
</style>
